<template>
	<view class="localcolor">
		<!-- 头部 -->
		<view class="localcolor-head">
			<view class="head">
				<view class="head-title" @tap="goHome">地方特色</view>
				<view class="search">
					<uni-icons type="search" color="#cfc7c6"></uni-icons>
					<input type="text" value="" placeholder="开始搜索..." />
				</view>
				<view class="local" @tap="citySelect">
					<text>成都</text>
					<uni-icons type="arrowdown"></uni-icons>
				</view>
			</view>
			<view class="nav">
				<view :class="{navselect:current===index}" v-for="(value,index) in items" @tap="onClickItem($event,index)">{{items[index]}}</view>
			</view>
		</view>
		<view class="content">
			<view v-if="current === 0">
				<view class="content-navs">
					<view class="hengxiang">
						<view class="gf-icons">
							<image src="../../static/image/icon/jiaotongfei.png" mode=""></image>
							<view>交通</view>
						</view>
						<view class="gf-icons">
							<image src="../../static/image/icon/dili.png" mode=""></image>
							<view>交通</view>
						</view>
						<view class="gf-icons">
							<image src="../../static/image/icon/jiaoyu.png" mode=""></image>
							<view>交通</view>
						</view>
						<view class="gf-icons">
							<image src="../../static/image/icon/jingji.png" mode=""></image>
							<view>交通</view>
						</view>
					</view>
					<view class="hengxiang">
						<view class="gf-icons">
							<image src="../../static/image/icon/lishi.png" mode=""></image>
							<view>交通</view>
						</view>
						<view class="gf-icons">
							<image src="../../static/image/icon/renkou.png" mode=""></image>
							<view>交通</view>
						</view>
						<view class="gf-icons">
							<image src="../../static/image/icon/wenhua.png" mode=""></image>
							<view>交通</view>
						</view>
						<view class="gf-icons">
							<image src="../../static/image/icon/more.png" mode=""></image>
							<view>交通</view>
						</view>
					</view>
				</view>
				<view class="content-hot">
					<view class="content-title">
						<uni-icons type="hand-thumbsup-filled"></uni-icons>
						<text>热门</text>
					</view>
					<view class="section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item>
								<view class="swiper-item uni-bg-red">A</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-green">B</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-blue">C</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="card-items" v-for="index in 3">
						<view class="item-img">
							<image src="../../static/image/photo.jpg" mode="" />
						</view>
						<view class="item-text">
							<view class="item-title">空军基地就会被</view>
							<view class="item-content">传播疾病v计划是否覆盖v比较好给我吃吧</view>
						</view>
					</view>
				</view>
				<view class="content-recommd">
					<view class="content-title">
						<uni-icons type="star-filled"></uni-icons>
						<text>推荐</text>
					</view>
					<view class="scroll">
						<scroll-view scroll-x="true" @scroll="scroll" scroll-left="120">
							<view class="scroll-view_H">
								<view class="scroll-item" v-for="n in 10">
									<view class="scroll-item-img">
										<image src="../../static/image/photo.jpg" mode=""></image>
									</view>
									<view class="scroll-item-text">啦啦啦啦啦啦啦啦啦</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="card-items" v-for="index in 3">
						<view class="item-img">
							<image src="../../static/image/photo.jpg" mode="" />
						</view>
						<view class="item-text">
							<view class="item-title">空军基地就会被</view>
							<view class="item-content">传播疾病v计划是否覆盖v比较好给我吃吧</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current === 1">
				选项卡2的内容
			</view>
			<view v-if="current === 2">
				选项卡3的内容
			</view>
			<view v-if="current === 3">
				选项卡4的内容
			</view>
			<view v-if="current === 4">
				选项卡5的内容
			</view>
		</view>
	</view>
</template>

<script>
	import citySelect from "@/components/city-select/city-select.vue"
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				items: ['官方展示', '个人展示', '本地电商', "本地网红", "本地企业"],
				current: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		methods: {
			onClickItem(e, index) {
				this.current = index;
			},
			citySelect() {
				uni.navigateTo({
					url: "./citys/citys"
				})
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			/* 返回首页 */
			goHome: function() {
				console.log(1);
				uni.switchTab({
					url: '../index/index'
				})
			},
		}
	}
</script>

<style>
	.localcolor-head {
		background-color: #007AFF;
	}

	.head {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head-title {
		color: #FFFFFF;
		font-size: 40rpx;
	}

	.search {
		width: 400rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		padding: 10rpx;
		border-radius: 30rpx;
	}

	.nav {
		margin-right: 30rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 5srpx;
	}

	.nav view {
		color: #FFFFFF;
		font-size: 32rpx;
		padding-bottom: 20rpx;
	}

	.navselect {
		border-bottom: 5rpx solid #e1e1e1;
	}

	.content-navs {
		width: 600rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.hengxiang {
		display: flex;
		justify-content: space-around;
	}

	.gf-icons {
		width: 80rpx;
		height: 150rpx;
		text-align: center;
	}

	.gf-icons image {
		width: 80rpx;
		height: 80rpx;
	}

	.content-title {
		padding: 20rpx;
	}

	.swiper {
		border-radius: 30rpx;
		width: 600rpx;
		background-color: #007AFF;
		margin: 0 auto;
	}

	.card-items {
		padding: 20rpx;
		display: flex;
		border-bottom: 2rpx solid #eee8e7;
	}

	.item-img image {
		width: 150rpx;
		height: 150rpx;
	}

	.item-text {
		margin: 20rpx;
	}

	.item-title {
		font-size: 35rpx;
		font-weight: bold;
		padding: 5rpx;
	}

	.item-content {
		padding: 5rpx;
		font-size: 32rpx;
		color: #555555;
	}

	.scroll {
		margin: 20rpx;
	}

	.scroll-view_H {
		display: flex;
	}

	.scroll-item {
		padding: 10rpx;
		width: 220rpx;
		height: 350rpx;
	}

	.scroll-item-img image {
		margin-top: 10rpx;
		width: 220rpx;
		height: 250rpx;
		margin-left: 10rpx;
		border-radius: 30rpx;
	}

	.scroll-item-text {
		font-size: 35rpx;
		margin: 5rpx;
	}
</style>
